{include file="header_jiandan.html"}
<style type="text/css">
.content_title{ width:1100px; margin:10px auto 20px; height:35px; line-height:35px; border-bottom:1px #e1e1e1 solid; font-family:"Microsoft Yahei"; font-size:20px; font-weight:bold; color:#333;}
.login_con { width: 1100px; margin:auto; background:#FFF;margin-bottom: 10px; overflow: hidden; }
.login_con .renewedly { margin: 0 0 0 10px; position: relative; top: 7px; }
.login_con .enter {display:block;border:1px #F06D10 solid;border-radius:5px; color:#FFF;background:#EF6F21;background:-webkit-gradient(linear,left top,left bottom,from(#FB7A42),to(#EF6F21));background:-moz-linear-gradient(top,#FB7A42 0%,#EF6F21 100%); width:150px; height:38px; line-height:38px; text-align:center; font-size:20px;text-decoration:none}
.login_con .enter:hover { background:#EF6F21}
.login_con .clew { display: block; float: left; color: #c53801; margin: 14px 0 0 8px; }
.login_con .clew:hover { color: #fff; text-decoration: none; background: #db6f46; }
.login_con .agreement { color: #006DD2; }
.login_con .agreement:hover { color: #fff; text-decoration: none; background: #006DD2; }

.login_fill_in { float: left; color: #646665;border-right:1px #e1e1e1 dotted; width:700px; padding: 10px 40px 30px 30px; display: inline; }
.login_fill_in h2 { font-size:24px; color:#666; font-weight:normal; height:50px;}
.login_fill_in table { border-collapse:collapse;}
.login_fill_in th{ width:90px; height:55px; font-weight:normal; font-family:"Microsoft Yahei"; font-size:14px; color:#333; text-align:right; padding-right:8px}
.login_fill_in td {padding:8px 0;}
.login_fill_in strong{ font-size:14px;font-weight:normal; font-family:"Microsoft Yahei";color:#F00; margin-right:5px;}
.login_fill_in .showinput { width:250px; height:20px;line-height:20px; padding:5px; border:1px #CCC solid;  border-radius:2px;}
.login_fill_in .login_btn {display:block;border:1px #F06D10 solid;border-radius:5px; color:#FFF;background:#EF6F21;background:-webkit-gradient(linear,left top,left bottom,from(#FB7A42),to(#EF6F21));background:-moz-linear-gradient(top,#FB7A42 0%,#EF6F21 100%); width:265px; height:38px; line-height:38px; text-align:center; font-size:20px; cursor:pointer}
.login_fill_in .login_btn:hover { background:#FB7A42}
.login_fill_in .idpic { font-size:14px;font-family:"Microsoft Yahei"; color:#333}

.login_right { width: 220px; float: right; color: #666; line-height: 22px; margin: 50px 35px 50px 0; display: inline; }
.login_right h4 { height: 33px;font-family:"Microsoft Yahei"; font-size: 15px; color: #999;width:100%; overflow:hidden }
</style>
<div class="content_color" style="border-top:1px #e1e1e1 solid">
<div class="content" style="background:#FFF; margin-top:35px;margin-bottom:15px;border-radius:5px;">
<div class="content_title">会员注册：</div>

<div class="login_con">
<div class="login_fill_in">
<form name="" id="register_form" method="post" action="">
<table>
  <tr>
    <th><strong>*</strong>{$lang.user_name}:</th>
    <td><input type="text" id="user_name" name="user_name" class="showinput" /></td>
    <td><label class="field_notice">用户名建议采用<font color="#FF0000">用户购物信用卡姓名</font></label><label id="checking_user" class="checking">{$lang.checking}</label></td>
  </tr>
  <tr>
      <th><strong>*</strong>{$lang.password}:</th>
      <td><input type="password" id="password" name="password" class="showinput" /></td>
      <td><label class="field_notice">{$lang.password_desc}</label></td>
  </tr>
  <tr>
      <th><strong>*</strong>{$lang.password_confirm}:</th>
      <td><input type="password" name="password_confirm" class="showinput" /></td>
      <td><label class="field_notice">{$lang.password_confirm_desc}</label></td>
  </tr>
  <tr>
    <th><strong>*</strong>手机电话:</th>
    <td><input type="text" id="phone_mob" name="phone_mob" class="showinput" /></td>
    <td><label class="field_notice">请输入您的手机/电话号码</label></td>
  </tr>
  <tr>
      <th><strong>*</strong>{$lang.email}:</th>
      <td><input type="text" id="email" name="email" class="showinput" /></td>
      <td><label class="field_notice">请输入您的邮箱地址</label></td>
  </tr>
  <tr>
    <th>{$lang.im_qq}:</th>
    <td><input type="text" name="im_qq" class="showinput" /></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th>所在区域:</th>
    <td class="idpic"><input name="idpic" type="radio" id="rbtnyes" value="rbtnyes" checked="checked" /><label for="rbtnyes"> 中国</label>&nbsp;&nbsp;&nbsp;&nbsp;<input id="rbtnno" type="radio" name="idpic" value="rbtnno" /><label for="rbtnno"> 美国</label></td>
    <td>&nbsp;</td>
  </tr>
  <!--{if $captcha}-->
  <tr>
      <th>{$lang.captcha}:</th>
      <td>
          <input type="text" name="captcha" class="showinput" id="captcha1" style="width:80px"/><a href="javascript:change_captcha($('#captcha'));" class="renewedly"><img id="captcha" src="index.php?app=captcha&amp;{$random_number}" /></a>
      </td>
      <td><label class="field_notice">{$lang.captcha_desc}</label></td>
  </tr>
  <!--{/if}-->
  <tr>
      <td></td>
      <td colspan="2" style="padding-top:20px"><input type="submit" name="Submit" value="同意协议并注册" class="login_btn" title="{$lang.register_now}" /><input type="hidden" name="ret_url" value="{$ret_url}" /></td>
  </tr>
  <tr>
      <td></td>
      <td colspan="2"><label for="clause"><input name="agree" type="checkbox" id="clause" value="1" checked="checked" style="display:none"/> {$lang.i_have_read}各项</label>《<a href="{url app=article&act=abouts&code=customer}" target="_blank" class="agreement">服务条款</a>》</td>
  </tr>  
</table>
</form>
</div>

<div class="login_right">
    <h4>已有{$site_name}账号？</h4>
    <span style="overflow:hidden; width:100%; display:block"><a href="{url app=member&act=login&ret_url=$ret_url}" class="enter" title="{$lang.login_now}">{$lang.login_now}</a></span>
</div>
</div>
</div></div>
<script type="text/javascript">
//注册表单验证
$(function(){
 
$('#register_form').validate({
	errorPlacement: function(error, element){
		var error_td = element.parent('td').next('td');
		error_td.find('.field_notice').hide();
		error_td.append(error);
	},
	success : function(label){
		label.addClass('validate_right').text('OK!');
	},
	onkeyup: false,
	rules : {
		user_name : {
			required : true,
			//byteRange: [3,25,'{$charset}'],
			minlength: 2,maxlength: 25,
			checkName: true,
			remote   : {
				url :'index.php?app=member&act=check_user&ajax=1',
				type:'get',
				data:{
					user_name : function(){
						return $('#user_name').val();
					}
				},
				beforeSend:function(){
					var _checking = $('#checking_user');
					_checking.prev('.field_notice').hide();
					_checking.next('label').hide();
					$(_checking).show();
				},
				complete :function(){
					$('#checking_user').hide();
				}
			}
		},
		password : { required : true, minlength: 6 },
		password_confirm : { required : true, equalTo : '#password' },
		phone_mob : { required : true, minlength: 6, checkTel : true},
		email : { required : true, email : true },
		im_qq : {  minlength: 5,maxlength: 11, digits : true},
		captcha : {
			required : true,
			remote   : {
				url : 'index.php?app=captcha&act=check_captcha',
				type: 'get',
				data:{
					captcha : function(){
						return $('#captcha1').val();
					}
				}
			}
		},
		agree : { required : true }
	},
	messages : {
		user_name : { required : '{$lang.user_name_required}', minlength: '{$lang.user_name_limit}',maxlength: '{$lang.user_name_limit}',checkName : '格式错误，仅支持汉字、字母、数字、"-"、"_"的组合', 
		              remote : '{$lang.user_already_taken}' },
		password  : { required : '{$lang.password_required}', minlength: '{$lang.password_length_limit}' },
		password_confirm : { required : '{$lang.password_confirm_please}', equalTo  : '{$lang.password_inconsistent}' },
		phone_mob : { required : '{$lang.phone_mob_required}', minlength: '请输入正确的手机/电话号码，最小为6位数字', checkTel: "错误的格式，请输入中国地区正确的手机号码或者电话号码" },
		email : { required : '{$lang.email_required}', email : '{$lang.email_invalid}' },
		im_qq : { minlength: '请输入正确的QQ号，最小为5位数字', maxlength: '请输入正确的QQ号，最大为11位数字', digits : 'QQ号码必须为数字' },
		captcha : { required : '{$lang.captcha_required}', remote   : '{$lang.captcha_error}' },
		agree : { required : '{$lang.agree_required}' }
	}
});
});
function check_name()
{
	var username = $("#user_name").val();
	if (username.match( /^[\u4E00-\u9FA5a-zA-Z0-9_]{3,25}$/)) {
		//alert("汉字 英文字母 数字 下划线组成，3-20位");
		return true;
	}else{
		return false;
	}
}

</script>
{include file="footer_jiandan.html"}